<template>
  <div class="DetailsCopyright">
    <div class="leftBox">
      <p>
        <el-icon :size="10">
          <Avatar />
        </el-icon>
        <span> 文章作者 </span>：{{$store.state.centerData[0]? $store.state.centerData[0].uname :''}}
      </p>
      <p>
        <el-icon :size="10">
          <Link />
        </el-icon>
        <span> 文章链接 </span>：<a :href="path">{{path}}</a>
      </p>
      <p>
        <el-icon :size="10">
          <WarnTriangleFilled />
        </el-icon>
        <span> 版权声明 </span>：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
      </p>
      <div class="money">
        <div>
          <el-tag>js</el-tag>
        </div>
        <div class="QRcodeF">
          <transition name="fade2" appear mode="out-in">
            <div class="QRcode" v-show="isShowQRcode">
              <el-image style="width:300px; height:400px" src="./images/alipay.jpg" fit="cover" />
              <el-image style="width:300px; height:400px  " src="./images/wechat.jpg" fit="cover" />
            </div>
          </transition>
          <span @mouseover="isShowQRcode = true" @mouseout="isShowQRcode = false">
            <el-button type="primary" size="small">
              <svg t="1667180094010" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2472" width="10" height="10">
                <path
                  d="M945.230769 433.230769h78.769231v78.769231h-78.769231zM866.461538 512h78.769231v78.769231h-78.769231zM787.692308 590.769231h78.76923v78.769231h-78.76923zM708.923077 669.538462h78.769231v78.76923h-78.769231zM630.153846 748.307692h78.769231v78.769231h-78.769231zM551.384615 827.076923h78.769231v78.769231h-78.769231zM472.615385 905.846154h78.76923v78.769231h-78.76923zM393.846154 827.076923h78.769231v78.769231h-78.769231zM315.076923 748.307692h78.769231v78.769231h-78.769231zM236.307692 669.538462h78.769231v78.76923h-78.769231zM157.538462 590.769231h78.76923v78.769231H157.538462zM78.769231 512h78.769231v78.769231H78.769231zM0 433.230769h78.769231v78.769231H0zM945.230769 354.461538h78.769231v78.769231h-78.769231zM945.230769 275.692308h78.769231v78.76923h-78.769231zM945.230769 196.923077h78.769231v78.769231h-78.769231z"
                  fill="#1E2028" p-id="2473"></path>
                <path
                  d="M866.461538 433.230769h78.769231v78.769231h-78.769231zM866.461538 354.461538h78.769231v78.769231h-78.769231zM866.461538 275.692308h78.769231v78.76923h-78.769231zM866.461538 196.923077h78.769231v78.769231h-78.769231z"
                  fill="#AF1441" p-id="2474"></path>
                <path d="M866.461538 118.153846h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2475"></path>
                <path d="M787.692308 512h78.76923v78.769231h-78.76923z" fill="#AF1441" p-id="2476"></path>
                <path
                  d="M787.692308 433.230769h78.76923v78.769231h-78.76923zM787.692308 354.461538h78.76923v78.769231h-78.76923zM787.692308 275.692308h78.76923v78.76923h-78.76923zM787.692308 196.923077h78.76923v78.769231h-78.76923z"
                  fill="#FF1A51" p-id="2477"></path>
                <path d="M787.692308 118.153846h78.76923v78.769231h-78.76923z" fill="#AF1441" p-id="2478"></path>
                <path d="M787.692308 39.384615h78.76923v78.769231h-78.76923z" fill="#1E2028" p-id="2479"></path>
                <path d="M708.923077 590.769231h78.769231v78.769231h-78.769231z" fill="#AF1441" p-id="2480"></path>
                <path
                  d="M708.923077 512h78.769231v78.769231h-78.769231zM708.923077 433.230769h78.769231v78.769231h-78.769231zM708.923077 354.461538h78.769231v78.769231h-78.769231zM708.923077 275.692308h78.769231v78.76923h-78.769231zM708.923077 196.923077h78.769231v78.769231h-78.769231zM708.923077 118.153846h78.769231v78.769231h-78.769231z"
                  fill="#FF1A51" p-id="2481"></path>
                <path d="M708.923077 39.384615h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2482"></path>
                <path d="M630.153846 669.538462h78.769231v78.76923h-78.769231z" fill="#AF1441" p-id="2483"></path>
                <path
                  d="M630.153846 590.769231h78.769231v78.769231h-78.769231zM630.153846 512h78.769231v78.769231h-78.769231zM630.153846 433.230769h78.769231v78.769231h-78.769231zM630.153846 354.461538h78.769231v78.769231h-78.769231zM630.153846 275.692308h78.769231v78.76923h-78.769231zM630.153846 196.923077h78.769231v78.769231h-78.769231zM630.153846 118.153846h78.769231v78.769231h-78.769231z"
                  fill="#FF1A51" p-id="2484"></path>
                <path d="M630.153846 39.384615h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2485"></path>
                <path d="M551.384615 748.307692h78.769231v78.769231h-78.769231z" fill="#AF1441" p-id="2486"></path>
                <path
                  d="M551.384615 669.538462h78.769231v78.76923h-78.769231zM551.384615 590.769231h78.769231v78.769231h-78.769231zM551.384615 512h78.769231v78.769231h-78.769231zM551.384615 433.230769h78.769231v78.769231h-78.769231zM551.384615 354.461538h78.769231v78.769231h-78.769231zM551.384615 275.692308h78.769231v78.76923h-78.769231zM551.384615 196.923077h78.769231v78.769231h-78.769231z"
                  fill="#FF1A51" p-id="2487"></path>
                <path d="M551.384615 118.153846h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2488"></path>
                <path d="M472.615385 827.076923h78.76923v78.769231h-78.76923z" fill="#F4608A" p-id="2489"></path>
                <path
                  d="M472.615385 748.307692h78.76923v78.769231h-78.76923zM472.615385 669.538462h78.76923v78.76923h-78.76923zM472.615385 590.769231h78.76923v78.769231h-78.76923zM472.615385 512h78.76923v78.769231h-78.76923zM472.615385 433.230769h78.76923v78.769231h-78.76923zM472.615385 354.461538h78.76923v78.769231h-78.76923zM472.615385 275.692308h78.76923v78.76923h-78.76923z"
                  fill="#FF1A51" p-id="2490"></path>
                <path d="M472.615385 196.923077h78.76923v78.769231h-78.76923z" fill="#1E2028" p-id="2491"></path>
                <path d="M393.846154 748.307692h78.769231v78.769231h-78.769231z" fill="#F4608A" p-id="2492"></path>
                <path
                  d="M393.846154 669.538462h78.769231v78.76923h-78.769231zM393.846154 590.769231h78.769231v78.769231h-78.769231zM393.846154 512h78.769231v78.769231h-78.769231zM393.846154 433.230769h78.769231v78.769231h-78.769231zM393.846154 354.461538h78.769231v78.769231h-78.769231zM393.846154 275.692308h78.769231v78.76923h-78.769231zM393.846154 196.923077h78.769231v78.769231h-78.769231z"
                  fill="#FF1A51" p-id="2493"></path>
                <path d="M393.846154 118.153846h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2494"></path>
                <path d="M315.076923 669.538462h78.769231v78.76923h-78.769231z" fill="#F4608A" p-id="2495"></path>
                <path
                  d="M315.076923 590.769231h78.769231v78.769231h-78.769231zM315.076923 512h78.769231v78.769231h-78.769231zM315.076923 433.230769h78.769231v78.769231h-78.769231zM315.076923 354.461538h78.769231v78.769231h-78.769231zM315.076923 275.692308h78.769231v78.76923h-78.769231zM315.076923 196.923077h78.769231v78.769231h-78.769231zM315.076923 118.153846h78.769231v78.769231h-78.769231z"
                  fill="#FF1A51" p-id="2496"></path>
                <path d="M315.076923 39.384615h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2497"></path>
                <path d="M236.307692 590.769231h78.769231v78.769231h-78.769231z" fill="#F4608A" p-id="2498"></path>
                <path
                  d="M236.307692 512h78.769231v78.769231h-78.769231zM236.307692 433.230769h78.769231v78.769231h-78.769231zM236.307692 354.461538h78.769231v78.769231h-78.769231zM236.307692 275.692308h78.769231v78.76923h-78.769231z"
                  fill="#FF1A51" p-id="2499"></path>
                <path d="M236.307692 196.923077h78.769231v78.769231h-78.769231z" fill="#FFFFFF" p-id="2500"></path>
                <path d="M236.307692 118.153846h78.769231v78.769231h-78.769231z" fill="#FF1A51" p-id="2501"></path>
                <path d="M236.307692 39.384615h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="2502"></path>
                <path d="M157.538462 512h78.76923v78.769231H157.538462z" fill="#F4608A" p-id="2503"></path>
                <path
                  d="M157.538462 433.230769h78.76923v78.769231H157.538462zM157.538462 354.461538h78.76923v78.769231H157.538462z"
                  fill="#FF1A51" p-id="2504"></path>
                <path
                  d="M157.538462 275.692308h78.76923v78.76923H157.538462zM157.538462 196.923077h78.76923v78.769231H157.538462z"
                  fill="#FFFFFF" p-id="2505"></path>
                <path d="M157.538462 118.153846h78.76923v78.769231H157.538462z" fill="#F4608A" p-id="2506"></path>
                <path d="M157.538462 39.384615h78.76923v78.769231H157.538462z" fill="#1E2028" p-id="2507"></path>
                <path
                  d="M78.769231 433.230769h78.769231v78.769231H78.769231zM78.769231 354.461538h78.769231v78.769231H78.769231zM78.769231 275.692308h78.769231v78.76923H78.769231zM78.769231 196.923077h78.769231v78.769231H78.769231z"
                  fill="#F4608A" p-id="2508"></path>
                <path
                  d="M78.769231 118.153846h78.769231v78.769231H78.769231zM0 354.461538h78.769231v78.769231H0zM0 275.692308h78.769231v78.76923H0zM0 196.923077h78.769231v78.769231H0z"
                  fill="#1E2028" p-id="2509"></path>
              </svg>
              &nbsp; 打赏
            </el-button>
          </span>
        </div>
      </div>
    </div>
    <div class=".hr"></div>
  </div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
  name: 'DetailsCopyright',
  setup (props) {
    const data = reactive({
      path: location.href,
      isShowQRcode: false,
    })

    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.DetailsCopyright {
  display: flex;
  font-size: 12px;
  max-width: 1200px;
  margin: 10px auto 0;
  color: #888;
  background: #fff;
  padding-bottom: 20px;
  border-bottom: 4px dashed #d2ebfd;
  .leftBox {
    flex: 1;
    background: #fff;
    padding-top: 20px;
    padding-left: 50px;
    border-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  p {
    margin: 10px 0;
  }
  .rightBox {
    width: 278px;
    margin-left: 20px;
  }
  span {
    color: #888;
  }
}
.money {
  width: 100px;
  display: flex;
  div {
    margin: 10px;
  }

  .QRcode {
    position: fixed;
    z-index: 4;
    top: 0px;
    left: 50%;
    width: 800px;
    margin-left: -300px;
    overflow: hidden;
  }
}
.hr {
  position: relative;
  margin: 40px auto;
  border: 4px dashed #d2ebfd;
  width: calc(100% - 4px);
}

.hr {
  overflow: visible;
  height: 0;
}
</style>